<template>
  <div class="adopt-refuse">
    <div class="filter-container" style="display: flex">
      <el-date-picker
        v-model="datePicker"
        ref="pick"
        size="small"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
      >
      </el-date-picker>
      <el-input
        :value="this.$route.query.projectName"
        size="small"
        class="filter-item"
        style="width:200px;"
        :disabled="true"
      />
      <el-input
        :value="this.$route.query.packageName"
        size="small"
        class="filter-item"
        style="width:200px;"
        :disabled="true"
      />
      <el-button
        @click="handleFilter"
        size="small"
        type="primary"
        ref="btnQuery"
        class="filter-item"
        >查询</el-button
      >
    </div>
    <div class="title">
      策略通过率情况
    </div>
    <div id="userLine" ref="userLine" style="height: 360px;"></div>
    <div class="title">
      规则命中趋势
      <el-select
        v-model="rulesId"
        placeholder="请选择规则名称"
        size="small"
        clearable
        multiple
        style="width:400px;"
        collapse-tags
        :multiple-limit="5"
        class="filter-item"
        @change="ruleHit"
      >
        <el-option
          v-for="(item, index) in rulesData"
          :key="index"
          :value="item.value"
          :label="item.label"
        ></el-option>
      </el-select>
    </div>
    <div id="userLiness" ref="userLiness" style="height: 360px;"></div>
    <div class="title">规则命中Top10</div>
    <div id="userLiness3" ref="userLiness3" style="height: 360px;"></div>
  </div>
</template>
<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { parseTimeJS as parseTime } from '@/utils'
import LineConfig from './dashboardLine'
import LineConfigss from './dashboardLine1'
import LineConfigss3 from './das'
import {
  passRate,
  ruleHit,
  getRulesId,
  ruleTop
} from '@/api/risksystem/strategy/strategy'

interface ListQuery {
  [propName: string]: any
}
@Component({
  name: 'strategyDetail',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private propExp1!: string
  private dataExp: any = ''
  private listLoading: boolean = false
  private downloadLoading: boolean = false
  private startDate = new Date().setTime(
    new Date().getTime() - 3600 * 1000 * 24 * 30
  )
  private datePicker: any = [
    this.formatDate(new Date(this.startDate)),
    this.formatDate(new Date())
  ]
  private info = 'day'
  private selectVer = []
  private project_name = []
  private package_name = []
  private rulesData: any = []
  private rulesId: any = null
  private listQuery: ListQuery = {
    // 分页对象
    startDate: this.datePicker[0],
    endDate: this.datePicker[1]
  }
  @Watch('datePicker')
  private onDatePickerChange(value: boolean) {
    this.listQuery.startDate = this.datePicker ? this.datePicker[0] : undefined
    this.listQuery.endDate = this.datePicker ? this.datePicker[1] : undefined
  }
  created() {
    // 最早可以调用vue组件method的钩子
    this.getRulesId()
    this.passRate()
    this.ruleTop()
    this.ruleHit()
    console.log(this.$route.query)
  }
  mounted() {
    //mounted 钩子
  }
  private handleFilter() {
    this.passRate()
    this.ruleTop()
    this.ruleHit()
  }
  private async passRate() {
    const { data } = await passRate({
      // 分页对象
      startDate: this.datePicker[0],
      endDate: this.datePicker[1],
      id: this.$route.query.id
    })
    // 图一
    let pass_option = new LineConfig('userLine')
    pass_option.setOption(data.option)
  }
  private async ruleHit() {
    const { data } = await ruleHit({
      startDate: this.datePicker[0],
      endDate: this.datePicker[1],
      id: this.$route.query.id,
      ruleCodes: this.rulesId
    })
    let reject_option = new LineConfigss('userLiness')
    reject_option.setOption(data.option)
  }
  private async ruleTop() {
    const { data } = await ruleTop({
      startDate: this.datePicker[0],
      endDate: this.datePicker[1],
      id: this.$route.query.id
    })
    let reject_option3 = new LineConfigss3('userLiness3')
    reject_option3.setOption(data.option)
  }
  private async getRulesId() {
    const { data } = await getRulesId({
      id: this.$route.query.id
    })
    this.rulesData = data.rows
    // this.rulesId = [data.rows[0].value]
  }
  private handleReset() {
    this.datePicker = []
    this.listQuery = {
      // 分页对象
      startDate: this.datePicker[0],
      endDate: this.datePicker[1],
      project_name: '',
      package_name: '',
      version: ''
    }
    // this.passRate()
  }
  private search() {
    this.passRate()
    this.ruleTop()
    this.ruleHit()
  }
  private formatDate(now: any) {
    var year = now.getFullYear() //取得4位数的年份
    var month = now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() //返回日期月份中的天数（1到31）
    var hour = now.getHours() //返回日期中的小时数（0到23）
    var minute = now.getMinutes() //返回日期中的分钟数（0到59）
    var second = now.getSeconds() //返回日期中的秒数（0到59）
    return year + '-' + month + '-' + date
  }
}
</script>
<style scoped>
.adopt-refuse {
  padding: 20px;
}
.title {
  padding: 12px;
}
</style>
